<template>
	<view>
		<view class="monster">
			<view class="head">
				<view class="eye-con">
				    <view class="eye eye1"></view>
				    <view class="eye eye2"></view>
				    <view class="eye eye3"></view>
				</view>
			</view>
			<view class="head-top">
				<view class="round"></view>
			</view>
			<view class="ear ear-left">
				<view class="ear-inside"></view>
			</view>
			<view class="ear ear-right">
				<view class="ear-inside"></view>
			</view>
			<view class="leg leg-left"></view>
			<view class="leg leg-right"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"animation",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.head{
  width: 112px;
  height: 100px;
  background: #DFEF91;
  border: 2px solid;
  border-radius: 56% 60%/60% 60%;
  position: relative;
}
/* 眼睛 */
.eye-con{
  display: flex;
  position: absolute;
  top: 50px;
  left: 14px;
}
.eye{
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 48%;
  border: 1.5px solid;
  position: relative;
}
.eye::after{
  content: "";
  width: 12px;
  height: 12px;
  background: #131313;
  border-radius: 50%;
  position: absolute;
  right: 1px;
  top: 8px;
}
.eye2{
  margin-left: 4px;
  margin-top: -8px;
}
.eye3{
  margin-left: 4px; 
}
.eye2::after{
  right: 5px;
  top: 9px;
}
.eye3::after{
  right: 10px;
  top: 10px;
}
.head-top{
  position: absolute;
  top: -20px;
  left: 48px;
  width: 6px;
  height: 20px;
  border-radius: 12px;
  background: #DFEF91;
  border: 1.5px solid;
  z-index: -1;
}
.head-top .round{
  width: 14px;
  height: 12px;
  background: #DFEF91;
  border: 1.5px solid;
  border-radius: 48%;
  position: absolute;
  top: -6px;
  left: -6px;
}
.head-top .round::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 3px;
  width: 8px;
  height: 10px;
  background: #DFEF91;
  border-radius: 48%;
}
.ear{
    width: 24px;
    height: 30px;
    background: #DFEF91;
    border-radius: 0 0 20% 112%;
    border: 1.5px solid;
    position: absolute;
    left: -20px;
    top: 40px;
    z-index: -1;
}
.ear-inside{
  border-top: 24px solid #fff;
  border-right: 24px solid #fff;
  border-bottom: 30px solid transparent;
  border-left: 30px solid transparent;
  position: absolute;
  left: -21px;
  top: -18px;
  z-index: -1;
}
.ear-inside::after{
  content: "";
  width: 1.5px;
  height: 28px;
  background: #131313;
  position: absolute;
  left: 2px;
  top: -12px;
  transform: rotate(-52deg);
}
.ear-right{
  left: 106px;
  border-radius: 0 20% 112% 0;
}
.ear-right .ear-inside{
  border-left: 24px solid #fff;
  border-top: 24px solid #fff;
  border-bottom: 30px solid transparent;
  border-right: 30px solid transparent;
  left: -8px;
}
.ear-right .ear-inside::after{
  left: -4px;
  top: -12px;
  transform: rotate(52deg);
}
.leg{
  width: 16px;
  height: 26px;
  background: #DFEF91;
  border-radius: 60%;
  border: 1.5px solid;
  position: absolute;
  top: 76px;
  left: 20px;
  transform: rotate(20deg);
  z-index: -1;
}
.leg-right{
  left: 80px;
  transform: rotate(-20deg);
}
.eye::after{
  animation: turn 0.4s linear infinite alternate;
}
@keyframes turn{
  0%{
    right: 11px;
  }
  100%{
    right: 1px;
  }
}
/* .monster{
  animation: move 1s ease-in-out infinite alternate;
}
@keyframes move{
  0%{
    top: -30px;
    left: 40px;
    transform: rotate(-30deg);
  }
  100%{
    top: -10px;
    left: 40px;
    transform: rotate(30deg);
  }
} */
</style>